import {
    createRouter,
    createWebHistory,
    createWebHashHistory,
} from "vue-router";

// 导入组件（同步导入/编译时导入）
import Home from "../views/Home.vue";
import User from "../views/User.vue";
import Post from "../views/Post.vue";
import NotFound from "../views/NotFound.vue";
import UserX from "../views/UserX.vue";
import UserDetail from "../views/UserDetail.vue";
import ProNav from "../views/ProNav.vue";
import UserXX from "../views/UserXX.vue";
import Promotion from "../views/Promotion.vue";
import Search from "../views/Search.vue";
import Login from "../views/Login.vue";

import UserPosts from "../components/UserPosts.vue";
import UserProfile from "../components/UserProfile.vue";
import UserFans from "../components/UserFans.vue";

// 异步引入（懒加载）
const About = () => import(/* webpackChunkName: "about" */ "../views/About.vue")

//
const routes = [
    // 当访问 / 路由时 加载Home组件 到父组件的<router-view/>
    {
        path: "/",
        name: "Home",
        component: Home,
    },

    // 当访问 / 路由时 加载Home组件 到父组件的<router-view/>
    // /users/123
    // { path: "/users/:id", name:"User", component: User },
    // { path: "/users/:id(\\d+)", name:"User", component: User },
    // { path: "/users/:id(\\d+)?", name: "User", component: User },

    // 将id映射成User组件的props id
    { path: "/users/:id(\\d+)?", name: "User", component: User, props: true },

    // /:chapters ->  匹配 /one, /one/two, /one/two/three, 等
    { path: "/:chapters+", component: Post },

    // 当访问 /about 路由时 加载Home组件 到父组件的<router-view/>
    {
        path: "/about",
        name: "About",

        // 异步加载组件（用户访问/about时才临时去加载）（运行时导入）
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        // component: () =>
        //     import(/* webpackChunkName: "about" */ "../views/About.vue"),
        component: About,

        // 独享路由守卫
        // beforeEnter: (to, from) => {
        //     console.log("/about beforeEnter from/to",from,to);
        //     // reject the navigation
        //     return Math.random() > 0.5;
        // },

        meta: { transition: "slide-right" },
    },

    // 将匹配以 `/user-` 开头的所有内容，并将其放在 `$route.params.postfix` 下
    { path: "/user-:postfix(.*)", component: UserX },

    {
        path: "/userdetail/:id",
        component: UserDetail,
        children: [
            {
                path: "",
                component: () => import("../components/UserProfile.vue"),
            },
            {
                // 当 /user/:id/profile 匹配成功
                // UserProfile 将被渲染到 User 的 <router-view> 内部
                path: "profile",
                component: () => import("../components/UserProfile.vue"),
            },
            {
                // 当 /user/:id/posts 匹配成功
                // UserPosts 将被渲染到 User 的 <router-view> 内部
                path: "posts",
                component: () => import("../components/UserPosts.vue"),
            },
        ],
    },

    { path: "/pronav", name: "ProNav", component: ProNav },

    // 重命名路由
    // {
    //     path: "/userx",
    //     components: {
    //         default: UserFans,
    //         // LeftSidebar: LeftSidebar 的缩写
    //         LeftSidebar: UserProfile,
    //         // 它们与 `<router-view>` 上的 `name` 属性匹配
    //         RightSidebar: UserPosts,
    //     },
    // },
    {
        path: "/userxx",
        // 你也可以在顶级路由就配置命名视图
        component: UserXX,
        children: [
            {
                path: "posts",
                component: UserPosts,
            },
            {
                path: "profile",
                components: {
                    default: UserProfile,
                    fans: UserFans,
                },
            },
        ],
    },

    // 视图接收props
    {
        path: "/userx/:id",
        components: {
            default: UserFans,
            // LeftSidebar: LeftSidebar 的缩写
            LeftSidebar: UserProfile,
            // 它们与 `<router-view>` 上的 `name` 属性匹配
            RightSidebar: UserPosts,
        },
        props: { default: false, LeftSidebar: true, RightSidebar: false },
    },
    {
        path: "/promotion",
        component: Promotion,
        props: { name: "admin", age: 123 },
    },
    {
        path: "/search",
        component: Search,
        props: (route) => ({ query: route.query.q }),
    },

    /* 路由守卫相关 */
    {
        path: "/login",
        name: "Login",
        component: Login,
    },

    // 将匹配所有内容并将其放在 `$route.params.pm` 下
    { path: "/:pm(.*)*", name: "NotFound", component: NotFound },
];

/* 全局路由表 */
const router = createRouter({
    // 定义全局路由模式 （history/hash）
    history: createWebHistory(process.env.BASE_URL),

    // 路由表具体配置
    routes,
});

// 全局路由守卫
// router.beforeEach((to, from) => {
//     console.log("from/to",from,to);

//     // 返回 false 以取消导航
//     return false;
// });
// router.beforeEach((to, from, next) => {
//     console.log("beforeEach from/to", from, to);
//     if (Math.random() < 0.33) {
//         // 踢到登录页
//         next({ name: "Login" });
//     }

//     else if(Math.random() < 0.367){
//         // 跳转失败
//         throw Error("你的人品不够好")
//     }

//     else {
//         // 直接放行
//         next();
//     }
// });

// router.afterEach((to, from, err) => {
//     console.log("afterEach from/to/err", from, to, err);
// });

export default router;
